<template>
    <div class="up-all-video">
        <div class="up-video-header">
            <h2>上传视频</h2>
        </div>
        <div class="add-video-btn">
            <span>视频文件：</span>
            <el-button type="primary" @click="addVideo = !addVideo" round icon="el-icon-plus">添加视频</el-button>
            <span>视频为flv或mp4格式，小于500M</span>
        </div>

        <div class="video-content" v-if="addVideo">
            <div class="up-video clear-fix">
                <div class="up-video-entrance">
                    <input type="file" title=" " ref="video" @change="schedule=false" accept="video/mp4,video/flv">
                    <img src="../../assets/添加视频.png" alt="">
                    <img v-show="!schedule" class="up-images" src="../../assets/正在上传中....png" alt="">
                    <video v-show="isVideo" :src="videoData.urlVideo"></video>
                </div>
                <div class="up-video-content">
                    <div>
                        <input type="text" v-model="videoName" placeholder="请输入章节名称">
                        <input  @click="upVideo" type="button" value="保存">
                    </div>
                    <div>
                        <span v-show="schedule">页面展示：“第三节”</span>
                        <div v-show="!schedule">
                            <span>
                                <span class="progress-bar"></span>
                            </span>
                            <span>{{Math.floor(progress.loaded/1024/1024*10)/10}}MB/{{Math.floor(progress.size/1000000*10)/10}}MB</span>
                            <span>{{Math.floor(progress.loaded/1024*10)/10}}kb/s</span>
                            <span>{{utils.progressTime(progressTime)}}</span>
                        </div>
                        <input type="button" value="删除" @click="videoDelete">
                    </div>
                </div>
            </div>
        </div>
        <div class="video-content">
            <div class="up-video clear-fix">
                <div class="up-video-entrance">
                    <input type="file" title=" " ref="video" @change="schedule=false" accept="video/mp4,video/flv">
                    <img src="../../assets/添加视频.png" alt="">
                    <img v-show="!schedule" class="up-images" src="../../assets/正在上传中....png" alt="">
                    <video v-show="isVideo" :src="videoData.urlVideo"></video>
                </div>
                <div class="up-video-content">
                    <div>
                        <input type="text" v-model="videoName" placeholder="请输入章节名称">
                        <input  @click="upVideo" type="button" value="保存">
                    </div>
                    <div>
                        <span v-show="schedule">页面展示：“第三节”</span>
                        <div v-show="!schedule">
                            <span>
                                <span class="progress-bar"></span>
                            </span>
                            <span>{{Math.floor(progress.loaded/1024/1024*10)/10}}MB/{{Math.floor(progress.size/1000000*10)/10}}MB</span>
                            <span>{{Math.floor(progress.loaded/1024*10)/10}}kb/s</span>
                            <span>{{utils.progressTime(progressTime)}}</span>
                        </div>
                        <input type="button" value="删除" @click="videoDelete">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
export default {
    data() {
        return {
            addVideo:false,//添加视频
            schedule: true, //进度
            // 视频链接
            videoData: {
                urlVideo: ''
            },
            // 选中视频时的状态
            changeVideo: false,
            // 上传视频的钥匙
            token: '',
            // 视频名字
            videoName: '',
            // 视频进度
            progress: {
                loaded: '',
                percent: '',
                size: ''
            },
            progressTime: 0, //上传视频所花时间
            isVideo: false, //视频标签
            videoAll:[],//系列视频市局
        }
    },
    created() {
        this.utils.$get(this.utils.GET_QINIU_TOKEN, res => {
            this.token = res.data
        })
        // var config = {
        //     useCdnDomain: true,
        //     region: 'http://qn.1sedu.com'
        // };
        // qiniu.getUploadUrl(config)
        this.utils.$get(this.utils.GET_LIST,res => {
            
        },{type:0})
    },
    methods: {
        // 获取图片url
        getImage(url, file) {
            this.image = url
        },
        // 上传视频
        upVideo() {
            if (!this.videoName) {
                return this.$message.error('请添加视频名称')
            }
            let videoFile = this.$refs.video.files[0]
            if (!videoFile) {
                return this.$message.error('请添加视频')
            }
            let option = {
                file: videoFile, //上传文件
                key: this.videoName, //上传名称
                token: this.token, //上传token
                domain: 'http://qn.1sedu.com', //上传地址
                putExtra: {
                    fnmae: videoFile.name, //原文件名
                    mimeType: ['video/mp4', 'video/flv'] //限定格式
                },
                config: {
                    useCdnDomain: false, //是否开启海外加速
                    region: qiniu.region.z2 //上传服务器区域
                }
            }
            // 上传配置
            var observable = qiniu.upload(
                option.file,
                option.key,
                option.token,
                option.putExtra,
                option.config
            )
            let _this = this
            var subscription = observable.subscribe({
                // 上传中
                next(res) {
                    _this.progressTime++
                    _this.progress = res.total

                    _this.$nextTick(() => {
                        document.querySelector('.progress-bar').style.width =
                            res.total.percent + '%'
                    })
                },
                // 上传失败
                error(err) {
                    console.log(err)
                    if (err.code == 614) {
                        _this.$message.error('该视频已上传')
                        return
                    }
                    _this.$message.error('上传失败')
                },
                // 上传成功
                complete(res) {
                    let urlName = res.hash
                    _this.videoData.urlVideo = 'http://qn.1sedu.com/' + urlName
                    _this.isVideo = true
                    _this.schedule = true
                }
            }) // 上传开始
        },
        // 清空或删除视频
        videoDelete(){
            this.videoName = '';
            this.isVideo = false
            this.changeVideo = true
            this.schedule = true
        }
    }
}
</script>

<style lang="less">
.up-all-video {
    padding: 20px 40px !important;
    .up-video-header {
        > h2 {
            display: inline-block;
            font-weight: 600;
            color: #399bff;
            padding: 5px 10px;
            border-bottom: 3px solid #399bff;
        }
    }
    .add-video-btn {
        margin-top: 40px;
        height: 40px;
        > span {
            line-height: 40px;
            &:nth-child(1) {
                font-size: 14px;
                color: #999;
            }
            &:nth-child(3) {
                font-size: 14px;
                color: #999;
            }
        }
        > button {
            background-color: transparent;
            border: 1px solid #399bff;
            color: #399bff;
            margin: 0 20px;
        }
    }
    /* 视频上传板块样式 */
    .video-content {
        padding-left: 70px;
        .up-video {
            height: 110px;
            margin-top: 40px;
            width: 100%;
            > div {
                float: left;
            }
            .up-video-name {
                color: #606266;
            }
            .up-video-entrance {
                position: relative;
                width: 160px;
                height: 106px;
                margin-left: 20px;
                > input {
                    position: absolute;
                    top: 0;
                    left: 0;
                    z-index: 999;
                    opacity: 0;
                    width: 100%;
                    height: 100%;
                }
                > img,
                video {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                }
                .up-images {
                    z-index: 111;
                }
                > video {
                    z-index: 112;
                }
            }
            .up-video-content {
                margin-left: 20px;
                width: 60%;
                > div {
                    width: 50%;
                    &:first-child {
                        margin-top: 10px;
                        > input {
                            height: 37px;
                            &:first-child {
                                width: 70%;
                                border: 1px solid #ccc;
                                padding-left: 10px;
                            }
                            &:last-child {
                                width: 80px;
                                float: right;
                                height: 34px;
                                background-color: #399bff;
                                border-radius: 17px;
                                color: #fff;
                                font-size: 14px;
                            }
                        }
                    }
                    &:last-child {
                        margin-top: 35px;
                        color: #ccc;
                        font-size: 14px;
                        > div {
                            margin-top: -15px;
                            display: inline-block;
                            width: 70%;
                            > span {
                                &:first-child {
                                    width: 100%;
                                    display: inline-block;
                                    height: 10px;
                                    border-radius: 5px;
                                    background-color: #f6f6f6;
                                    > span {
                                        display: block;
                                        width: 0%;
                                        height: 100%;
                                        border-radius: 5px;
                                        background: linear-gradient(
                                            to right,
                                            #29d9a9,
                                            #399bff
                                        );
                                    }
                                }
                                &:nth-child(3) {
                                    display: inline-block;
                                    margin-left: 20px;
                                }
                                &:nth-child(4) {
                                    float: right;
                                }
                            }
                        }
                        > input {
                            float: right;
                            margin-top: -25px;
                            background-color: #fff;
                            width: 80px;
                            height: 37px;
                            color: #ccc;
                        }
                    }
                }
            }
        }
    }
}
</style>

